<template>
  <view class="terminal-state">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <u-navbar title="交易明细">
      <view class="u-m-r-20" slot="right" @click="triggleDrop()"> 筛选 </view>
    </u-navbar>
    <view class="flex terminal-state__header">
      <u-search
        placeholder="请输入商户号"
        v-model="requstBody.searchValue"
        shape="square"
        bg-color="#f6f6f6"
        :show-action="true"
        @search="search"
        @custom="search"
      ></u-search>
    </view>
    <view class="flex u-padding-20 justify-between">
      <view class="date flex align-center" @click="openPicker()">
        {{ requstBody.beginTransTime }}至{{ requstBody.endTransTime }}
        <u-image
          width="35rpx"
          height="35rpx"
          src="/static/image/order/icon_calendar.png"
          class="u-margin-left-10"
        ></u-image>
      </view>
      <view
        class="date"
        :class="dateChecked == 0 ? 'date_select' : ''"
        @click="today()"
      >
        今天
      </view>
      <view
        class="date"
        :class="dateChecked == 1 ? 'date_select' : ''"
        @click="yesterday()"
      >
        昨天
      </view>
      <view
        class="date"
        :class="dateChecked == 2 ? 'date_select' : ''"
        @click="week()"
      >
        近7天
      </view>
    </view>
    <view class="statistic__header">
      <view class="statistic__header-title">总交易(元)</view>
      <view class="statistic__header-money">{{
        orderCountInfo.totalTransAmount
      }}</view>
      <view class="flex justify-between">
        <view class="statistic__item">
          <view class="">笔数</view>

          <view class="u-margin-top-10">{{
            orderCountInfo.totalOrderCount
          }}</view>
        </view>
        <view class="statistic__item">
          <view class="">刷卡</view>

          <view class="u-margin-top-10">{{
            orderCountInfo.posOrderCount
          }}</view>
        </view>
        <view class="statistic__item">
          <view class="">闪付</view>

          <view class="u-margin-top-10">{{
            orderCountInfo.nfcOrderCount
          }}</view>
        </view>
        <view class="statistic__item">
          <view class=" ">扫码</view>

          <view class="u-margin-top-10">{{
            orderCountInfo.scanOrderCount
          }}</view>
        </view>
      </view>
    </view>
    <scroll-view
      class="home__grid-group mt-20"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view>
        <view
          class="terminal-state__item"
          v-for="(item, index) in orderList"
          :key="index"
          @click="goDetail(item.orderNo)"
        >
          <view class="flex justify-between">
            <view class="">
              {{ item.lsMerchantName }}
            </view>
            <view class="bold">
              {{ item.transAmount }}
            </view>
          </view>
          <view class="flex justify-between u-m-t-10">
            <view class="">
              {{ item.merchantNo }}
            </view>
            <view class="">
              {{
                item.transStatus == 'SUCCESS'
                  ? '交易成功'
                  : item.transStatus == 'INIT'
                  ? '初始化'
                  : item.transStatus == 'FAILED'
                  ? '交易失败'
                  : item.transStatus == 'REFUNDED'
                  ? '已退票'
                  : ''
              }}
            </view>
          </view>
        </view>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
    <u-popup v-model="showPopup" mode="top" class="pop_filter">
      <view>
        <view class="pop_filter__title u-margin-left-20"> 支付方式 </view>
        <view class="pop_filter__item flex u-margin-top-20 u-margin-bottom-20">
          <view
            class="pop_filter__btn"
            :class="{ pop_filter__select: checked === index }"
            v-for="(item, index) in payTypeCode"
            :key="index"
            @click="selectBtn('1', index)"
          >
            {{ item.value }}
          </view>
        </view>
        <view class="pop_filter__title u-margin-left-20"> 结算类型 </view>
        <view class="pop_filter__item flex u-margin-top-20 u-margin-bottom-20">
          <view
            class="pop_filter__btn"
            v-for="(item, index) in settleFilter"
            :key="index"
            :class="{ pop_filter__select: typeChecked === index }"
            @click="selectBtn('2', index)"
          >
            {{ item.value }}
          </view>
        </view>
        <view class="pop_filter__title u-margin-left-20"> 交易金额区间 </view>
        <view class="pop_filter__item flex u-margin-top-20 u-margin-bottom-20">
          <u-input
            class="u-margin-left-20 u-margin-right-20"
            v-model="min"
            type="number"
            :border="false"
            :custom-style="{
              backgroundColor: '#f6f6f6',
              borderRadius: '20rpx',
            }"
            placeholder="最小值"
          />
          至
          <u-input
            class="u-margin-left-20 u-margin-right-20"
            v-model="max"
            type="number"
            :border="false"
            :custom-style="{
              backgroundColor: '#f6f6f6',
              borderRadius: '20rpx',
            }"
            placeholder="最大值"
          />
        </view>

        <view class="flex u-margin-20 u-padding-top-20 jiaoyijine">
          <u-button
            type="primary"
            class="flex-1 u-m-r-15"
            :custom-style="customCancelStyle"
            hover-class="false"
            @click="cancel()"
            >重置</u-button
          >
          <u-button
            type="primary"
            class="flex-1 u-margin-left-15"
            :custom-style="customSubmitStyle"
            hover-class="false"
            @click="submitFilter()"
            >确定</u-button
          >
        </view>
      </view>
    </u-popup>

    <term-picker
      :visable.sync="pickerVisable"
      :defaultDate="defaultDay"
      :maxDay="maxDay"
      @confirm="confirmByDay"
    >
    </term-picker>
  </view>
</template>

<script>
import termPicker from '@/components/term-picker/term-picker.vue';
import getDateTime from '@/common/js/getdateTime.js';

export default {
  components: {
    termPicker,
  },
  data() {
    return {
      checked: null,
      dateChecked: null,
      typeChecked: null,
      customCancelStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#f6f6f6',
        color: 'black',
      },
      customSubmitStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
        color: 'white',
      },
      src: '/static/image/home/icon_scan.png',
      thumb: '/static/image/home/icon_terminal_status.png',
      pageNo: 1,
      pageSize: '10',
      requstBody: {
        beginTransTime: '',
        endTransTime: '',
        agentNo: '',
        searchValue: '',
      },
      orderList: [],

      scrollTop: 0,
      status: 'loadmore',
      showPopup: false,
      payTypeCode: [],

      settleFilter: [],
      date: '',
      orderCountInfo: {},
      searchInfo: {},
      min: '',
      max: '',
      pickerVisable: false, //是否日期选择控件
      defaultDay: [], //日期默认选择，为空则是当前日期
      maxDay: 365, //最大跨度日
      startDay: '',
      endDay: '',
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  onLoad(options) {
    const _that = this;
    _that.date = options.date;
    _that.requstBody.agentNo = options.agentNo;
    // _that.date = _that.$route.query.date;
    // _that.requstBody.agentNo = _that.$route.query.agentNo;
    _that.requstBody.beginTransTime = _that.date;
    _that.requstBody.endTransTime = _that.date;

    this.transOrderQuery();
    this.transOrderSearchParam();
  },
  mounted() {},
  methods: {
    selectBtn(type, index) {
      if (type == '1') {
        this.checked = index;
      } else if (type == '2') {
        this.typeChecked = index;
      }
    },
    cancel() {
      const _that = this;
      if (_that.checked) {
        _that.checked == null;
        _that.$delete(_that.requstBody, 'payTypeCode');
      }
      if (_that.typeChecked) {
        _that.typeChecked == null;
        _that.$delete(_that.requstBody, 'settleType');
      }
      if (_that.min) {
        _that.min = '';
        _that.$delete(_that.requstBody, 'minAmount');
      }
      if (_that.max) {
        _that.max = '';
        _that.$delete(_that.requstBody, 'maxAmount');
      }
    },
    submitFilter() {
      const _that = this;
      if (_that.checked && _that.checked > 0) {
        _that.$set(
          _that.requstBody,
          'payTypeCode',
          _that.payTypeCode[_that.checked].key
        );
      } else if (_that.checked == 0) {
        _that.$delete(_that.requstBody, 'payTypeCode');
      }

      if (_that.typeChecked && _that.typeChecked > 0) {
        _that.$set(
          _that.requstBody,
          'settleType',
          _that.settleFilter[_that.checked].key
        );
      } else if (_that.typeChecked == 0) {
        _that.$delete(_that.requstBody, 'payTypeCode');
      }
      if (_that.min) {
        _that.$set(_that.requstBody, 'minAmount', _that.min);
      }
      if (_that.max) {
        _that.$set(_that.requstBody, 'maxAmount', _that.max);
      }
      _that.pageNo = 1;
      _that.orderList = [];
      _that.showPopup = false;
      _that.transOrderQuery();
    },
    triggleDrop() {
      this.showPopup = !this.showPopup;
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.terminalInfoList();
    },
    transOrderQuery() {
      let _that = this;

      _that.$zx.order_api
        .transOrderQuery(this.pageNo, this.pageSize, this.requstBody)
        .then((data) => {
          _that.orderList = _that.orderList.concat(data.orderPageList);
          _that.orderCountInfo = data.orderCountInfo;
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },

    transOrderSearchParam() {
      let _that = this;
      _that.payTypeCode.push({
        key: '',
        value: '全部',
      });
      _that.settleFilter.push({
        key: '',
        value: '全部',
      });
      _that.$zx.order_api.transOrderSearchParam().then((data) => {
        _that.searchInfo = data;
        _that.payTypeCode = _that.payTypeCode.concat(data.payTypeCode);
        _that.settleFilter = _that.settleFilter.concat(data.settleType);
      });
    },
    search(e) {
      console.log('e=' + e);
      this.requstBody.searchValue = e;
      this.pageNo = 1;
      this.orderList = [];
      this.transOrderQuery();
    },
    goStateDetail(item) {
      let itemStr = JSON.stringify(item);
      this.$u.route('pages/main/terminal/terminalStateDetail', {
        item: encodeURIComponent(itemStr),
      });
    },
    openPicker() {
      this.pickerVisable = true;
    },
    confirmByDay(date) {
      this.dateChecked = -1;
      this.startDay = date[0];
      this.endDay = date[1];

      this.requstBody.beginTransTime = date[0];
      this.requstBody.endTransTime = date[1];
      this.pageNo = 1;
      this.orderList = [];
      this.transOrderQuery();
    },
    refreshData() {
      this.pageNo = 1;
      this.orderList = [];
      this.transOrderQuery();
    },
    today() {
      this.dateChecked = 0;
      this.requstBody.beginTransTime = getDateTime.dateTimeStr('y-m-d');
      this.requstBody.endTransTime = getDateTime.dateTimeStr('y-m-d');
      this.refreshData();
    },
    yesterday() {
      this.dateChecked = 1;
      this.requstBody.beginTransTime = getDateTime.getDateStr(null, -1);
      this.requstBody.endTransTime = getDateTime.getDateStr(null, -1);
      this.refreshData();
    },
    week() {
      this.dateChecked = 2;
      this.requstBody.beginTransTime = getDateTime.getDateStr(null, -7);
      this.requstBody.endTransTime = getDateTime.dateTimeStr('y-m-d');
      this.refreshData();
    },
    goDetail(orderNo) {
      this.$u.route('pages/main/trade/tradeDetail', {
        orderNo: orderNo,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.terminal-state {
  &__header {
    padding: 20rpx;
    background-color: white;
  }

  &__item {
    background-color: white;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
    padding: 20rpx;
  }
}

.yellow {
  color: #ff8e00;
}

.pop_filter {
  position: absolute;
  // top: 80rpx;

  &__title {
    font-weight: bold;
    height: 60rpx;
    line-height: 60rpx;
  }

  &__item {
    flex-wrap: wrap;
  }

  &__btn {
    background-color: #f6f6f6;

    padding: 10rpx 20rpx;
    text-align: center;
    margin: 10rpx 20rpx;
    border-radius: 10rpx;
  }

  &__input {
    background-color: #f6f6f6;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__select {
    background-color: #f1e8ff;
    color: #9d60ff;
    background-image: url('../../../static/image/home/icon_filter_checked.png');
    background-position: right bottom;
    background-repeat: no-repeat;
  }
}

.date {
  background-color: white;
  border-radius: 50rpx;
  padding: 15rpx 20rpx;
}

.date_select {
  background-color: #9d60ff;
  color: white;
}

.statistic {
  &__header {
    background-image: url(/static/image/benefit/img_trade_query_page_bg.png);
    background-size: 100% 100%;
    color: white;
    text-align: center;
    height: 348rpx;
    padding: 50rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &__header-money {
    margin-top: 10rpx;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 40rpx;
  }
}
::v-deep .jiaoyijine {
  align-items: center;
}
</style>
